import cssVars from 'css-vars-ponyfill'
import Themes from './cssvars'
import { setStatusBar } from '@/utils/cordovaUtils'

// 默认主题色
export const defaultTheme = 'dark'
//主题设置方法
export const setTheme = function(theme = defaultTheme){
  document.documentElement.setAttribute('data-theme', theme)

  cssVars({
    watch: true, // 当添加，删除或修改其 <link> 或 <style> 元素的禁用或 href 属性时，ponyfill 将自行调用
    variables: Themes[theme], // variables 自定义属性名 / 值对的集合
    onlyLegacy: true, // false  默认将 css 变量编译为浏览器识别的 css 样式  true 当浏览器不支持 css 变量的时候将 css 变量编译为识别的 css
  })

  //获取var.js文件中定义的色彩变量到js
  window.Less = {
      mainbgc: Themes[theme]['--bg-color'],
      navbgc: Themes[theme]['--nav-bar-background-color'],
      indicatorColor: Themes[theme]['--indicator-color'],
  }
  // 变更状态栏主题色
  setStatusBar()
}
